<template>
	<view class="cover-pop">
		<view class="cover-pop-trigger" id="trigger-warp" ref="triggerWarp" @click="clickTrigger">
			<slot></slot>
		</view>
		<view class="cover-pop-maks" @click="show = false" :style="`width: 100%;height:${h}px;top:${y}px`" v-if="show">
			<view class="cover-pop-content" @click.stop :style="{maxHeight:`${h*0.75}px`}">
				<slot name="content" :data="{height:h*0.75}"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data: () => {
			return {
				show: false,
				h: 0,
				y: 0,
				windowHeight: 0
			}
		},
		created() {
			const windowInfo = uni.getWindowInfo();
			this.windowHeight = windowInfo.windowHeight;
		},

		methods: {
			clickTrigger(e) {
				if (this.show) {
					this.show = false
					this.$emit('close')
					return
				}
				const query = uni.createSelectorQuery().in(this);
				query.select('#trigger-warp').boundingClientRect(data => {
					const {
						top,
						height
					} = data;
					// 计算出
					this.y = top + height;
					this.h = this.windowHeight - this.y
					this.show = true
					this.$emit('show')
				}).exec();
			},
			close(){
				this.show = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cover-pop {
		.cover-pop-maks {
			background-color: rgba(0, 0, 0, .1);
			position: fixed;
			left: 0;
			z-index: 99999;

			.cover-pop-content {
				width: 100%;
				background-color: #fff;
				border-radius: 0 0 24rpx 24rpx;
				overflow-y: auto;
				display: flex;
				flex-direction: column;
			}
		}
	}
</style>